<template>
  <div>
    <div class="right-content">
      <h2 class="title">
        <span>注册账号</span>
      </h2>
      <el-form :model="studentRegisterForm" ref="studentRegisterFormRef" :rules="studentRegistFormRules">
        <el-form-item prop="phone">
          <el-input placeholder="请输入手机号" v-model.number="studentRegisterForm.phone"></el-input>
        </el-form-item>
        <el-form-item prop="account">
          <el-input placeholder="请输入账号" v-model="studentRegisterForm.account"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" autocomplete="off" v-model="studentRegisterForm.password"
            type="password"></el-input>
        </el-form-item>
        <el-form-item prop="passAgain">
          <el-input placeholder="请再次输入密码确认" autocomplete="off" v-model="studentRegisterForm.passAgain"
            type="password"></el-input>
        </el-form-item>
        <div class="select_identity">
          <p>选择身份</p>
          <div class="select_content">
            <div class="select_teacher" @click="changeToTeacher(scene)">
              <img src="../../../assets/register/p1.svg" style="margin-left: 10px;">
              <span class="name">老师</span>
            </div>
            <div class="select_student">
              <img src="../../../assets/register/p2.svg" style="margin-left: 10px;">
              <span class="name">学生</span>
            </div>
          </div>
        </div>
        <el-form-item prop="name">
          <el-input placeholder="请输入姓名" v-model="studentRegisterForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="school">
          <el-input placeholder="输入学校/机构" v-model="studentRegisterForm.school"></el-input>
        </el-form-item>
        <el-form-item prop="no">
          <el-input placeholder="请输入学号" v-model.number="studentRegisterForm.no"></el-input>
        </el-form-item>
      </el-form>
      <div class="register">
        <el-button type="primary" @click="register">注册</el-button>
      </div>
      <div class="login">
        <span>已有账号?</span>
        <span class="loginButton" @click="login()">去登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import { Encrypt } from "@/utils/decrypt.js";
import {postRequest} from "@/utils/api";
// import {Message} from "element-ui";

export default {
  name: 'studentRegister',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.studentRegisterForm.passAgain !== '') {
          this.$refs.studentRegisterFormRef.validateField('passAgain');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.studentRegisterForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      scene: 2,
      studentRegisterForm: {
        phone: '',
        account: '',
        password: '',
        passAgain: '',
        name: '',
        school: '',
        no: '',
        type: 1
      },
      studentRegistFormRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { type: 'number', message: '手机号必须为数字值' }
        ],
        account: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, required: true, trigger: 'blur' }
        ],
        passAgain: [
          { validator: validatePass2, required: true, trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请输入学校或机构名称', trigger: 'blur' }
        ],
        no: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { type: 'number', message: '学号必须为数字值' }
        ],
      }
    }
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    changeToTeacher(scene) {
      scene = this.scene - 1
      this.$emit('changeToTeacher', scene)
    },
    register() {
      this.$refs.studentRegisterFormRef.validate(async valid => {
        if (!valid) return
        if (this.studentRegisterForm.phone.toString().length !== 11) return this.$message.error("手机号应为11位")
        this.studentRegisterForm.password = Encrypt(this.studentRegisterForm.password);
        const res = postRequest('/user/register',this.studentRegisterForm).then(res => {
          console.log(this.studentRegisterForm.password)
          if (res.data.code === 200) {
            // Message({ message: "注册成功", type: "success" });
            this.$router.push('/login')
          }
          // else if (res.data.message ==='用户名被占用') {
          //   Message({ message: "用户名被占用", type: "error" });
          // }else {
          //   Message({ message: "注册失败", type: "error" });
          // }
        })
        console.log(res)

      })
    },
  }
}
</script>
<style scoped>
.right-content {
  width: 431px;
  height: 760px;
  padding: 0 35px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgb(85 108 144 / 7%);
}

.title {
  text-align: center;
  padding: 18px 0;
  position: relative;
  font-size: 28px;
}

.select_identity {
  margin-bottom: 5px;
}

.select_identity p {
  font-size: 16px;
}

.select_content {
  display: flex;
  justify-content: space-between;
}

.select_teacher {
  height: 55px;
  display: flex;
  align-items: center;
  width: 172px;

}

.select_student {
  height: 55px;
  display: flex;
  align-items: center;
  width: 172px;
  border: 1px solid #4285f4;
}

.register {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.register button {
  width: 450px;
  height: 50px;
}

.login {
  display: flex;
  float: right;
  margin-top: 24px;
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #606266;
}

.loginButton {
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #4285f4;
  cursor: pointer;
}

.name {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  text-align: center;
  color: #3c4043;
  line-height: 24px;
  letter-spacing: 1px;
}
</style>